<template>
  <div class="main-container">
<!-- 0. 导航栏 (Header) -->
    <header>
        <div class="container nav-container">
            <a href="/" id="logo-link">
                <!-- Replace with your actual SVG or image -->
                <img src="../../../assets/images/login/deecp-logo_2.svg" alt="Deecp Logo" class="logo-svg">
            </a>
            <div style="flex-grow: 1;"></div>
            <nav class="nav-links">
                <a href="javascript:;" @click='scrollToSection("features")'>核心功能</a>
                <a href="javascript:;" @click='scrollToSection("pricing")'>会员计划</a>
                <a href="javascript:;" @click='scrollToSection("courses-teaser")'>大师课程</a>
            </nav>
            <div class="nav-auth-buttons" v-if="!userinfo || !userinfo.userName">
                <a href="javascript:;" class="btn btn-secondary" @click="login" style="margin-right: 10px;">登录</a>
                <a href="javascript:;" class="btn btn-primary btn-register" @click="register">立即注册</a> 
            </div>
            <div v-else class="flex" style="flex-direction: row; justify-content: center;align-items: center;">
              <div><Avatar :src="getUserHeaderImage" :size="32" /></div>
                <a-dropdown>
                  <a class="ant-dropdown-link" @click.prevent>
                    <span style="display:inline-block;padding:0 12px;color: #666;">{{userinfo&&userinfo.userName}}</span>
                    <DownOutlined style='color: #666;'/>
                  </a>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <a href="javascript:;" @click='gotoIndex'>选股平台</a>
                      </a-menu-item>
                      <a-menu-item>
                        <a href="javascript:;" @click='logout'>退出登录</a>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
            </div>
        </div>
    </header>

    <main>
        <!-- 1. 英雄区域 (Hero Section) -->
        <section id="hero">
            <div class="container">
                <h1 data-aos="fade-up" data-aos-duration="800">
                    不再与机会擦肩而过！<br class="hidden md:block"><span class="gradient-text">AI</span>赋能的<span class="gradient-text">选股与交易体系构建</span>引擎
                </h1>
                <p class="sub-headline" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">
                    独家市场洞察、精细化选股工具、交易大师课程、AI智能分析
                </p>
                <p class="sub-headline" data-aos="fade-up" data-aos-delay="300" data-aos-duration="800" style="margin-top: -0.5rem;">
                    助您高效锁定潜力股，构建稳健交易系统
                </p>
                <div class="cta-buttons" data-aos="fade-up" data-aos-delay="400" data-aos-duration="800">
                    <a href="javascript:;" @click='scrollToSection("pricing")' class="btn btn-primary" style="padding: 1rem 2rem; font-size: 1.1em;">选择会员计划</a>
                </div>
                <div class="stats" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 4rem;" data-aos="fade-up" data-aos-delay="600">
                    <div class="stat-item floating card" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); color: white;">
                        <div class="stat-number gradient-text">100+</div><div>专业指标</div>
                    </div>
                    <div class="stat-item floating card" style="animation-delay: 0.3s; background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); color: white;">
                        <div class="stat-number gradient-text">10K+</div><div>数据点更新/日</div>
                    </div>
                    <div class="stat-item floating card" style="animation-delay: 0.6s; background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); color: white;">
                        <div class="stat-number gradient-text">10+</div><div>大师课程</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 2. 痛点与承诺 (Problem & Promise) -->
        <section id="problem-promise" class="bg-white">
            <div class="container">
                <h2 class="section-title" data-aos="fade-up">您是否也曾面临这些<span class="gradient-text">选股困境</span>？</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; text-align: center; margin: 30px 0;">
                    <div class="card" data-aos="fade-up" data-aos-delay="100">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#e74c3c" style="width:50px; height:50px; margin:0 auto 1rem;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
                        </svg>
                        <h4>错失良机</h4>
                        <p class="text-sm text-gray-600">牛股启动前夕，模式符合却无暇复盘筛选？</p>
                    </div>
                    <div class="card" data-aos="fade-up" data-aos-delay="200">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#3498db" style="width:50px; height:50px; margin:0 auto 1rem;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
                        </svg>
                        <h4>信息过载</h4>
                        <p class="text-sm text-gray-600">海量资讯难辨真伪，缺乏系统化分析工具？</p>
                    </div>
                    <div class="card" data-aos="fade-up" data-aos-delay="300">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#27ae60" style="width:50px; height:50px; margin:0 auto 1rem;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
                        </svg>
                        <h4>体系缺失</h4>
                        <p class="text-sm text-gray-600">交易方法不成体系，追涨杀跌，心态不稳？</p>
                    </div>
                    <div class="card" data-aos="fade-up" data-aos-delay="400">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#f39c12" style="width:50px; height:50px; margin:0 auto 1rem;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <h4>效率低下</h4>
                        <p class="text-sm text-gray-600">手动复盘耗时耗力，选股效率亟待提升？</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 3. 核心功能展示 (Features & Benefits) -->
        <section id="features" ref="featuresSectionRef" style="background-color: #f0f4f8; scroll-margin-top: 80px;">
            <div class="container">
                <h2 class="section-title" data-aos="fade-up"><span class="gradient-text">释放数据的力量，把握市场先机</span></h2>

                <div id="features-info" class="feature-item card" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: center; margin-bottom:3rem;" data-aos="fade-up">
                    <div>
                        <h3 class="gradient-text" style="font-size:1.8rem;">资讯中心 - 洞悉市场脉搏</h3>
                        <p class="text-gray-700"><strong>免费获取</strong>每日市场概况：十大股票形态、主流板块、Deecp精选50股、板块分布，独家Deecp中期信号曲线助您判断市场健康度</p>
                        <p class="text-gray-700 mt-2">学习全球顶尖交易大师课程，不断更新</p>
                        <div style="margin-top:1.5rem;">
                            <a href="#" class="btn btn-primary">免费查看市场概况</a>
                            <a href="javascript:;" @click='scrollToSection("courses-teaser")' class="btn btn-secondary" style="margin-left:10px;">浏览大师课程</a>
                        </div>
                    </div>
                    <div class="feature-image-container" ref="imageContainerRef">
                        <img src="../../../assets/images/login/市场概况.jpg" alt="资讯中心截图" class="feature-display-image" id="infoImage" ref="infoImageRef">
                        <button class="arrow-btn left" onclick="switchImage('infoImage', ['../../../assets/images/login/市场概况.jpg', '../../../assets/images/login/资讯课程.jpg'], -1)">❮</button>
                        <button class="arrow-btn right" onclick="switchImage('infoImage', ['../../../assets/images/login/市场概况.jpg', '../../../assets/images/login/资讯课程.jpg'], 1)">❯</button>
                        <div class="image-switcher">
                            <button onclick="setImage('infoImage', ['../../../assets/images/login/市场概况.jpg', '../../../assets/images/login/资讯课程.jpg'], 0)"></button>
                            <button onclick="setImage('infoImage', ['../../../assets/images/login/市场概况.jpg', '../../../assets/images/login/资讯课程.jpg'], 1)"></button>
                        </div>
                    </div>
                </div>

                <div id="features-selector" class="feature-item card" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: center; margin-bottom:3rem;" data-aos="fade-up" data-aos-delay="100">
                     <div class="feature-image-container">
                        <img src="../../../assets/images/login/智能选股1.jpg" alt="选股器截图" class="feature-display-image" id="selectorImage" ref="selectorImageRef">
                        <button class="arrow-btn left" onclick="switchImage('selectorImage', ['../../../assets/images/login/智能选股1.jpg', '../../../assets/images/login/智能选股2.jpg', '../../../assets/images/login/智能选股3.jpg', '../../../assets/images/login/智能选股4.jpg'], -1)">❮</button>
                        <button class="arrow-btn right" onclick="switchImage('selectorImage', ['../../../assets/images/login/智能选股1.jpg', '../../../assets/images/login/智能选股2.jpg', '../../../assets/images/login/智能选股3.jpg','../../../assets/images/login/智能选股4.jpg'], 1)">❯</button>
                        <div class="image-switcher">
                            <button onclick="setImage('selectorImage', ['../../../assets/images/login/智能选股1.jpg', '../../../assets/images/login/智能选股2.jpg', '../../../assets/images/login/智能选股3.jpg','../../../assets/images/login/智能选股4.jpg'], 0)"></button>
                            <button onclick="setImage('selectorImage', ['../../../assets/images/login/智能选股1.jpg', '../../../assets/images/login/智能选股2.jpg', '../../../assets/images/login/智能选股3.jpg','../../../assets/images/login/智能选股4.jpg'], 1)"></button>
                            <button onclick="setImage('selectorImage', ['../../../assets/images/login/智能选股1.jpg', '../../../assets/images/login/智能选股2.jpg', '../../../assets/images/login/智能选股3.jpg','../../../assets/images/login/智能选股4.jpg'], 2)"></button>
                        </div>
                    </div>
                    <div>
                        <h3 class="gradient-text" style="font-size:1.8rem;">智能选股 & 定制自选</h3>
                        <p class="text-gray-700">海量指标自由组合，"与/或"逻辑轻松实现复杂筛选。自定义指标权重，打造个性化自选股评分体系。专业K线图与多维度数据，深入分析个股</p>
                        <a href="javascript:;" @click='scrollToSection("pricing")' class="btn btn-primary" style="margin-top:1.5rem;">了解会员解锁全部</a>
                    </div>
                </div>

                <div id="features-backtest" class="feature-item card" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: center; margin-bottom:3rem;" data-aos="fade-up" data-aos-delay="200">
                    <div>
                        <h3 class="gradient-text" style="font-size:1.8rem;">历史复盘 - 验证优化策略</h3>
                        <p class="text-gray-700">轻松回溯任意时间段的股票与板块表现，复盘历史走势，验证和优化您的交易策略，避免未来犯同样的错误</p>
                        <a href="javascript:;" @click='scrollToSection("pricing")' class="btn btn-primary" style="margin-top:1.5rem;">了解会员解锁全部</a>
                    </div>
                    <div class="feature-image-container">
                        <img src="../../../assets/images/login/历史复盘.jpg" alt="历史复盘截图" class="feature-display-image">
                    </div>
                </div>

                <div id="features-ai" class="feature-item card" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: center;" data-aos="fade-up" data-aos-delay="300">
                     <div class="feature-image-container">
                        <img src="../../../assets/images/login/智能体.jpg" alt="AI智能体截图" class="feature-display-image">
                    </div>
                    <div>
                        <h3 class="gradient-text" style="font-size:1.8rem;">AI智能体 - 私人投研助理</h3>
                        <p class="text-gray-700">内置AI大模型智能体，随时解答您的课程疑问，辅助进行股票深度分析，让学习和研究事半功倍</p>
                        <a href="javascript:;" @click='scrollToSection("pricing")' class="btn btn-primary" style="margin-top:1.5rem;">了解会员解锁全部</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 4. "为什么选择Deecp？" (Why Deecp?) -->
        <section id="why-deecp" class="bg-white">
            <div class="container">
                <h2 class="section-title" data-aos="fade-up">为什么选择 <span class="gradient-text">Deecp</span>？</h2>
                <div class="why-deecp-grid">
                    <div class="card text-center" data-aos="zoom-in-up" data-aos-delay="100">
                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" stroke-width="1.5" stroke="#e74c3c" fill="none" stroke-linecap="round" stroke-linejoin="round" style="margin:0 auto 1rem;">
                          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                          <path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7" />
                          <path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" />
                          <path d="M9.7 17l4.6 0" />
                        </svg>
                        <h4 class="font-semibold text-lg mb-1">不错过机会</h4>
                        <p class="text-sm text-gray-600">"Deecp每日精选"与"信号曲线"，助您提前捕捉市场良机</p>
                    </div>
                    <div class="card text-center" data-aos="zoom-in-up" data-aos-delay="200">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#3498db" style="width:50px; height:50px; margin:0 auto 1rem;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
                        </svg>
                        <h4 class="font-semibold text-lg mb-1">个性化定制</h4>
                        <p class="text-sm text-gray-600">从选股到自选股评分，全面支持您的个性化交易体系</p>
                    </div>
                    <div class="card text-center" data-aos="zoom-in-up" data-aos-delay="300">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#27ae60" style="width:50px; height:50px; margin:0 auto 1rem;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
                        </svg>
                        <h4 class="font-semibold text-lg mb-1">极致高效率</h4>
                        <p class="text-sm text-gray-600">强大筛选与复盘工具，大幅提升研究与决策效率</p>
                    </div>
                     <div class="card text-center" data-aos="zoom-in-up" data-aos-delay="400">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#f39c12" style="width:50px; height:50px; margin:0 auto 1rem;">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5" />
                        </svg>
                        <h4 class="font-semibold text-lg mb-1">大师智囊团</h4>
                        <p class="text-sm text-gray-600">系统化大师课程与AI辅助，加速您的专业成长</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 5. 会员方案与定价 (Pricing Plans) -->
        <section id="pricing" ref="pricingSectionRef" style="background-color: #f0f4f8; scroll-margin-top: 80px;">
            <div class="container">
                <h2 class="section-title" data-aos="fade-up">选择适合您的 <span class="gradient-text">Deecp会员方案</span></h2>
                <div class="pricing-table" ref="pricingTableRef">
                    <div class="pricing-plan card" data-plan="free" data-aos="fade-up" data-aos-delay="100">
                        <div>
                            <h3>免费用户</h3>
                            <div class="price" style="color:#7f8c8d;">¥0</div>
                            <ul>
                                <li>访问资讯中心</li>
                            </ul>
                        </div>
                        <a href="javascript:;" class="btn btn-secondary" @click='register'>立即注册</a>
                    </div>
                    <div class="pricing-plan card" data-plan="weekly" data-aos="fade-up" data-aos-delay="200">
                        <div>
                            <h3>周会员 (体验)</h3>
                            <div class="price">¥{{weekPrice}}<span style="font-size: 1rem; color: #555;">/周</span></div>
                             <ul>
                                <li>访问所有核心功能</li>
                                <li>短期灵活体验</li>
                            </ul>
                        </div>
                        <a href="javascript:;" class="btn btn-primary" @click='gotoVipBuy("week")'>¥6 抢先体验</a>
                    </div>
                    <div class="pricing-plan card selected" data-plan="monthly" data-aos="fade-up" data-aos-delay="300">
                        <div>
                            <h3>月度会员</h3>
                            <div class="price" style="color:#e74c3c;">¥{{monthPrice}}<span style="font-size: 1rem; color: #555;">/月</span></div>
                            <ul>
                                <li>访问所有核心功能</li>
                                <li>性价比高</li>
                                <li>按月付费，无长期承诺</li>
                            </ul>
                        </div>
                        <a href="javascript:;" class="btn btn-primary" style="background: linear-gradient(135deg, #e74c3c 0%, #3498db 50%, #27ae60 100%);"  @click='gotoVipBuy("month")'>选择月度方案</a>
                    </div>
                     <div class="pricing-plan card" data-plan="annual" data-aos="fade-up" data-aos-delay="400">
                        <div>
                            <h3>年度会员</h3>
                            <div class="price">¥{{yearPrice}}<span style="font-size: 1rem; color: #555;">/年</span></div>
                            <p style="color: #27ae60; font-weight: bold;">立省 ¥49 (相当于8.5折)</p>
                            <ul>
                                <li>访问所有核心功能</li>
                                <li>最划算的选择</li>
                                <li>全年无忧使用</li>
                                <li><strong>优先客户支持</strong></li>
                            </ul>
                        </div>
                        <a href="javascript:;" class="btn btn-secondary"  @click='gotoVipBuy("year")'>选择年度方案</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 6. 课程专区入口 (Course Portal Teaser) -->
        <section id="courses-teaser" ref="coursesTeacherSectionRef" class="bg-white" style="scroll-margin-top: 80px;">
            <div class="container">
                <h2 class="section-title" data-aos="fade-up">跟随交易大师，<span class="gradient-text">系统学习实战智慧</span></h2>
                <p class="text-center text-gray-600" style="max-width:700px; margin: -2rem auto 2.5rem auto;" data-aos="fade-up" data-aos-delay="100">
                    我们精选并翻译制作了多位国际知名交易大师的经典课程，如Mark-minervini, oliver-kell, Al Brooks, Van Tharp等，助您构建坚实的交易理论基础和实战技能。课程内容持续更新中！
                </p>
                <div class="courses-scroller-container">
                    <div class="courses-scroller">
                        <!-- Original Cards -->
                        <div class="card" @click="gotoKecheng">
                            <img src="../../../assets/images/login/Mark-minervini.png" alt="Mark-minervini课程" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                            <div style="padding:1rem;">
                                <h4 class="font-semibold text-lg">Mark-minervini 趋势交易法</h4>
                                <p class="text-sm text-gray-500">学习SEPA策略，捕捉超级成长股</p>
                                <a href="#" class="btn btn-secondary" style="font-size:0.9rem; padding:0.5rem 1rem; margin-top:1rem;">了解详情</a>
                            </div>
                        </div>
                        <div class="card" @click="gotoKecheng">
                            <img src="../../../assets/images/login/oliver-kell.jpg" alt="oliver-kell课程" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                             <div style="padding:1rem;">
                                <h4 class="font-semibold text-lg">oliver-kell 短线爆发策略</h4>
                                <p class="text-sm text-gray-500">掌握关键K线形态和入场时机</p>
                                <a href="#" class="btn btn-secondary" style="font-size:0.9rem; padding:0.5rem 1rem; margin-top:1rem;">了解详情</a>
                            </div>
                        </div>
                        <div class="card" @click="gotoKecheng">
                            <img src="../../../assets/images/login/AI-Brooks.jpg" alt="Al Brooks课程" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                             <div style="padding:1rem;">
                                <h4 class="font-semibold text-lg">Al Brooks 价格行为交易</h4>
                                <p class="text-sm text-gray-500">精读市场语言，洞悉裸K奥秘</p>
                                <a href="#" class="btn btn-secondary" style="font-size:0.9rem; padding:0.5rem 1rem; margin-top:1rem;">了解详情</a>
                            </div>
                        </div>
                        <div class="card" @click="gotoKecheng">
                            <img src="https://placehold.co/280x180/f39c12/white?text=Van+Tharp" alt="Van Tharp课程" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                             <div style="padding:1rem;">
                                <h4 class="font-semibold text-lg">Van Tharp 头寸管理</h4>
                                <p class="text-sm text-gray-500">科学管理风险，优化资金效率</p>
                                <a href="#" class="btn btn-secondary" style="font-size:0.9rem; padding:0.5rem 1rem; margin-top:1rem;">了解详情</a>
                            </div>
                        </div>
                         <div class="card" @click="gotoKecheng">
                            <img src="https://placehold.co/280x180/9b59b6/white?text=New+Course" alt="新课程" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                             <div style="padding:1rem;">
                                <h4 class="font-semibold text-lg">更多大师课即将上线</h4>
                                <p class="text-sm text-gray-500">敬请期待更多交易智慧分享</p>
                                <a href="#" class="btn btn-secondary disabled" style="font-size:0.9rem; padding:0.5rem 1rem; margin-top:1rem; opacity:0.5; cursor:not-allowed;">敬请期待</a>
                            </div>
                        </div>
                        <!-- Copied Cards for seamless scroll -->
                        <div class="card" @click="gotoKecheng">
                            <img src="../../../assets/images/login/Mark-minervini.png" alt="Mark-minervini课程" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                            <div style="padding:1rem;">
                                <h4 class="font-semibold text-lg">Mark-minervini 趋势交易法</h4>
                                <p class="text-sm text-gray-500">学习SEPA策略，捕捉超级成长股</p>
                                <a href="#" class="btn btn-secondary" style="font-size:0.9rem; padding:0.5rem 1rem; margin-top:1rem;">了解详情</a>
                            </div>
                        </div>
                        <div class="card" @click="gotoKecheng">
                            <img src="../../../assets/images/login/oliver-kell.jpg" alt="oliver-kell课程" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                             <div style="padding:1rem;">
                                <h4 class="font-semibold text-lg">oliver-kell 短线爆发策略</h4>
                                <p class="text-sm text-gray-500">掌握关键K线形态和入场时机</p>
                                <a href="#" class="btn btn-secondary" style="font-size:0.9rem; padding:0.5rem 1rem; margin-top:1rem;">了解详情</a>
                            </div>
                        </div>
                        <div class="card" @click="gotoKecheng">
                            <img src="../../../assets/images/login/AI-Brooks.jpg" alt="Al Brooks课程" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                             <div style="padding:1rem;">
                                <h4 class="font-semibold text-lg">Al Brooks 价格行为交易</h4>
                                <p class="text-sm text-gray-500">精读市场语言，洞悉裸K奥秘</p>
                                <a href="#" class="btn btn-secondary" style="font-size:0.9rem; padding:0.5rem 1rem; margin-top:1rem;">了解详情</a>
                            </div>
                        </div>
                        <div class="card" @click="gotoKecheng">
                            <img src="https://placehold.co/280x180/f39c12/white?text=Van+Tharp" alt="Van Tharp课程" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                             <div style="padding:1rem;">
                                <h4 class="font-semibold text-lg">Van Tharp 头寸管理</h4>
                                <p class="text-sm text-gray-500">科学管理风险，优化资金效率</p>
                                <a href="#" class="btn btn-secondary" style="font-size:0.9rem; padding:0.5rem 1rem; margin-top:1rem;">了解详情</a>
                            </div>
                        </div>
                         <div class="card" @click="gotoKecheng">
                            <img src="https://placehold.co/280x180/9b59b6/white?text=New+Course" alt="新课程" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                             <div style="padding:1rem;">
                                <h4 class="font-semibold text-lg">更多大师课即将上线</h4>
                                <p class="text-sm text-gray-500">敬请期待更多交易智慧分享</p>
                                <a href="#" class="btn btn-secondary disabled" style="font-size:0.9rem; padding:0.5rem 1rem; margin-top:1rem; opacity:0.5; cursor:not-allowed;">敬请期待</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 7. 邀请有礼 (Referral Program) -->
        <section id="referral" style="background-color: #e7f5ff;">
            <div class="container text-center card" style="max-width:700px; background: linear-gradient(135deg, #e0f2fe, #f0e6ff);" data-aos="fade-up">
                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" stroke-width="1.5" stroke="#e74c3c" fill="none" stroke-linecap="round" stroke-linejoin="round" style="margin:0 auto 1rem;">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <path d="M3 8m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z" />
                  <path d="M12 8l0 13" />
                  <path d="M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7" />
                  <path d="M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5" />
                </svg>
                <h2 class="gradient-text" style="font-size: 2rem; margin-bottom: 1rem;">邀请好友，同享福利！</h2>
                <p class="text-gray-700">成功邀请好友注册并消费，您和好友均可获得前三笔消费金额<strong style="color: #e74c3c;">10%的返佣奖励</strong>！多邀多得！</p>
                <p class="text-gray-700">更有购买课程<strong style="color: #e74c3c;">送会员</strong>！</p>
            </div>
        </section>

        <!-- 8. 用户评价/信任状 (Social Proof / Testimonials) -->
        <section id="testimonials" class="bg-white">
            <div class="container">
                <h2 class="section-title" data-aos="fade-up">听听 <span class="gradient-text">Deecp用户</span> 怎么说</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 20px;">
                    <div class="testimonial card" style="border-left: 4px solid #e74c3c;" data-aos="fade-up" data-aos-delay="100">
                        <p class="testimonial-text text-gray-700" style="font-style: italic; margin-bottom: 1rem; font-size: 1.05rem;">"Deecp的选股器太强大了，特别是自定义指标和权重的功能，帮我精准定位到了几只好股票，选股效率大大提升！"</p>
                        <p class="testimonial-author" style="font-weight: bold; color: #e74c3c;"><strong>- 交易员 王凯</strong></p>
                    </div>
                    <div class="testimonial card" style="border-left: 4px solid #3498db;" data-aos="fade-up" data-aos-delay="200">
                        <p class="testimonial-text text-gray-700" style="font-style: italic; margin-bottom: 1rem; font-size: 1.05rem;">"市场概况和信号曲线让我对大盘有了更清晰的认识，Deecp50股的质量也很高。课程内容也很棒，正在学习Mark的。"</p>
                        <p class="testimonial-author" style="font-weight: bold; color: #3498db;"><strong>- 用户 赵女士</strong></p>
                    </div>
                    <div class="testimonial card" style="border-left: 4px solid #27ae60;" data-aos="fade-up" data-aos-delay="300">
                        <p class="testimonial-text text-gray-700" style="font-style: italic; margin-bottom: 1rem; font-size: 1.05rem;">"AI助手回答课程问题很及时，还能帮我分析个股，感觉像有个私人研究员。历史复盘功能也让我对策略更有信心了。"</p>
                        <p class="testimonial-author" style="font-weight: bold; color: #27ae60;"><strong>- 学员 东边不亮西边亮</strong></p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 9. 最终行动召唤 (Final CTA) -->
        <section id="final-cta" style="background: linear-gradient(135deg, #e74c3c 0%, #3498db 50%, #27ae60 100%); color: white; text-align: center;">
            <div class="container">
                <h2 style="font-size: 2.2rem; margin-bottom: 1rem;" data-aos="fade-up">准备好提升您的选股能力，<br>构建专属交易体系了吗？</h2>
                <p style="font-size: 1.1rem; margin-bottom: 2rem; opacity: 0.9;" data-aos="fade-up" data-aos-delay="100">
                    加入Deecp，用数据和智慧武装您的投资决策！
                </p>
                <a href="javascript:;" @click='scrollToSection("pricing")' class="btn btn-primary" style="padding: 1rem 2.5rem; font-size: 1.2em; background: white; color: #3498db; border: 2px solid white;" data-aos="zoom-in" data-aos-delay="200">
                    立即加入Deecp，开启智能交易之旅！
                </a>
            </div>
        </section>
    </main>

    <footer style="background-color: #2c3e50; color: #bdc3c7; padding: 2rem 0;">
        <div class="container">
            <div class="footer-content-wrapper" style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px;">
    
                <!-- 左侧: Copyright 和 免责声明 -->
                <div class="footer-left" style="flex-basis: 55%; min-width: 300px;">
                    <p style="font-size:0.9rem; margin-top: 0; margin-bottom: 0.5rem;">
                        © <span id="current-year" ref='currentYearRef'></span> Deecp. All Rights Reserved.
                    </p>
                    <p style="font-size:0.8rem; margin-bottom:0; opacity:0.7; line-height: 1.5;">
                        投资有风险，入市需谨慎。本平台提供工具及资讯，不构成任何投资建议。
                    </p>
                </div>
    
                <!-- 右侧: 包含备案信息列 和 公众号二维码列 -->
                <div class="footer-right" style="flex-basis: 40%; min-width: 300px; display: flex; align-items: flex-start; gap: 15px; /* 调整最小宽度以适应两列 */">
    
                    <!-- 右侧 - 列1: 备案信息 (2行) -->
                    <div class="beian-column" style="flex-grow: 1; min-width: 180px; /* 允许备案信息占用更多空间 */">
                        <p style="font-size: 0.8rem; line-height: 1.7; margin:0 0 0.5rem 0; text-align: left;">
                            <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" style="color: #ecf0f1; text-decoration: none; white-space: nowrap;">苏ICP备2024144409号-1</a>
                        </p>
                        <p style="font-size: 0.8rem; line-height: 1.7; margin:0; text-align: left;">
                            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=XXXXXXXXXXXXXXXXXX" target="_blank" rel="noopener noreferrer" style="color: #ecf0f1; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap;">
                                <img src="https://placehold.co/16x16/bdc3c7/2c3e50?text=徽" alt="公安备案图标" style="margin-right: 4px; border-radius:2px; vertical-align: middle;">苏公网安备 XXXXXXXXXXXXXXXXXX号
                            </a>
                        </p>
                    </div>
    
                    <!-- 右侧 - 列2: 公众号二维码 -->
                    <div class="qrcode-column" style="min-width: 90px; text-align: center;">
                         <img src="../../../assets/images/login/qrcode.png" alt="Deecp微信公众号二维码" style="width: 90px; height: 90px; display: block; margin: 0 auto 0.3rem auto; border-radius: 4px; border: 1px solid #4a6a82;">
                         <p style="font-size:0.8rem; color: #ecf0f1; margin:0; line-height: 1.2;">扫码关注Deecp公众号</p>
                    </div>
    
                </div>
            </div>
        </div>
    </footer>
  </div>
</template>

<script lang='ts'>
  import { Avatar,Dropdown, Menu, MenuItem } from 'ant-design-vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  export default {
    components: {
        AAvatar: Avatar,
        ADropdown: Dropdown,
        AMenu: Menu,
        AMenuItem: MenuItem
      }
    };
</script>

<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
  import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
  import { getVipList } from '/@/api/main/index';
  import { userInfoApi } from '/@/api/sys/login';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '/@/store/modules/user';
  
  const userinfo = ref();
  const userStore = useUserStore();
  const viplist = ref();

  const weekPrice = ref(0);
  const monthPrice = ref(0);
  const yearPrice = ref(0);

  const featuresSectionRef = ref();
  const pricingSectionRef = ref();
  const coursesTeacherSectionRef = ref();

  const router = useRouter();

  const { getLoginState, setLoginState } = useLoginState();
  const currentYearRef = ref();
  const imageContainerRef = ref();
  const infoImageRef = ref();
  const selectorImageRef = ref();
  const pricingTableRef = ref();
  let currentImageIndexes = {};

  const getUserHeaderImage = computed(()=>{
    if(userinfo.value&&userinfo.value.avatar){
      return 'js'+userinfo.value.avatar
    }
    return '/src/assets/icons/deecp_icon.svg'
  });

  function scrollToSection(sectionId) {
    let element;
    if(sectionId=='features'){
        element = featuresSectionRef.value;
    } else if(sectionId=='pricing') {
        element = pricingSectionRef.value;
    } else if(sectionId=='courses-teaser') {
        element = coursesTeacherSectionRef.value;
    }
    if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  function login() {
    router.push({
      'name': "Login",
      "query": {
        'state': LoginStateEnum.LOGIN
      }
    });
  }
  function register(){
    router.push({
      'name': "Login",
      "query": {
        'state': LoginStateEnum.REGISTER
      }
    });
  }

  function gotoIndex(){
    window.open("/dp/xinwen/zixun");
  }
  function logout(){
    userStore.confirmLoginOut();
  }
  function gotoVipBuy(vipType) {
    window.open('/desktop/dpperson?vipType='+vipType);
  }
  function gotoKecheng(){
      window.open("/dp/xinwen/zixun?activeKey=2");
  }

  function setImage(imageId:any, imagesArray, index, switcherContainer) {
      const imageElement = imageId=='infoImage'?infoImageRef.value:selectorImageRef.value;
      if (!imageElement || !imagesArray || imagesArray.length === 0) return;

      currentImageIndexes[imageId] = index;
      imageElement.style.opacity = 0;
      setTimeout(() => {
          imageElement.src = imagesArray[index];
          const altBase = imageElement.alt.replace(/ \d+|截图$/, '');
          imageElement.alt = `${altBase} ${index + 1}`;
          imageElement.style.opacity = 1;
      }, 200);

      const dots = switcherContainer.querySelectorAll('button');
      dots.forEach((dot, i) => {
          dot.classList.toggle('active', i === index);
      });
  }



  onMounted(async()=> {
    let vipinfo = await getVipList();
    viplist.value = vipinfo.list;
    if(viplist.value && viplist.value.length>0) {
        weekPrice.value = viplist.value[0].price;
        monthPrice.value = viplist.value[1].price;
        yearPrice.value = viplist.value[2].price;
    }
    const res = await userInfoApi('none');
    if(res['result']=='true') {
      userinfo.value = res.user;
    };
    console.log('getUserHeaderImage:',userinfo.value)
    currentYearRef.value.textContent = new Date().getFullYear();
    imageContainerRef.value.querySelectorAll('.image-switcher').forEach(switcher => {
        const firstDot = switcher.querySelector('button');
        const imageContainer = switcher.closest('.feature-image-container');
        const imageElement = imageContainer ? imageContainer.querySelector('.feature-display-image') : null;

        if (firstDot && imageElement) {
            const imageId = imageElement.id;
            let initialIndex = currentImageIndexes[imageId] !== undefined ? currentImageIndexes[imageId] : 0;

            const dots = switcher.querySelectorAll('button');
            dots.forEach((dot, i) => {
                dot.classList.toggle('active', i === initialIndex);
            });

            const isActiveDotPresent = Array.from(dots).some(d => d.classList.contains('active'));
            if (!isActiveDotPresent && initialIndex === 0) {
                firstDot.classList.add('active');
            }
        }
    });

    const pricingTable = pricingTableRef.value;
    if (pricingTable) {
        const pricingCards = pricingTable.querySelectorAll('.pricing-plan');
        pricingCards.forEach(card => {
            card.addEventListener('click', (event) => {
                if (event.target.tagName === 'A' || event.target.closest('A')) {
                    return;
                }

                pricingCards.forEach(c => c.classList.remove('selected'));
                card.classList.add('selected');

                pricingCards.forEach(c => {
                    const button = c.querySelector('.btn');
                    const planType = c.dataset.plan;
                    if (c.classList.contains('selected')) {
                        button.textContent = '已选择此方案';
                        button.classList.remove('btn-secondary');
                        button.classList.add('btn-primary');
                          if(planType === 'monthly'){
                              button.style.background = 'linear-gradient(135deg, #e74c3c 0%, #3498db 50%, #27ae60 100%)';
                          } else {
                              button.style.background = 'linear-gradient(135deg, #e74c3c, #3498db)';
                          }
                    } else {
                        if(planType === 'free'){
                            button.textContent = '立即注册';
                        } else if (planType === 'weekly'){
                            button.textContent = '¥6 抢先体验';
                        } else if (planType === 'monthly'){
                            button.textContent = '选择月度方案';
                        } else if (planType === 'annual'){
                              button.textContent = '选择年度方案';
                        }
                        button.classList.remove('btn-primary');
                        button.classList.add('btn-secondary');
                        button.style.background = '';
                    }
                });
            });
        });
        const defaultSelectedCard = pricingTable.querySelector('.pricing-plan.selected');
        if (defaultSelectedCard) {
            const button = defaultSelectedCard.querySelector('.btn');
            button.textContent = '已选择此方案';
            button.classList.remove('btn-secondary');
            button.classList.add('btn-primary');
              if(defaultSelectedCard.dataset.plan === 'monthly'){
                  button.style.background = 'linear-gradient(135deg, #e74c3c 0%, #3498db 50%, #27ae60 100%)';
              }
        }
    }
 });

</script>
<style lang="less" scoped>

    :root {
        --color-primary-start: #e74c3c;
        --color-primary-mid: #3498db;
        --color-primary-end: #27ae60;
        --gradient-primary: linear-gradient(135deg, #e74c3c 0%, #3498db 50%, #27ae60 100%);
        --gradient-button: linear-gradient(135deg, #e74c3c, #3498db);
        --color-hero-bg-start: #2c3e50; /* Hero区域背景色 */
        --color-hero-bg-end: #34495e;   /* Hero区域背景色 */
        --nav-link-color: #555;
        --nav-link-hover-color: #3498db;
    }

    .main-container {
        scroll-behavior: smooth;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        color: #333;
        background-color: #f8f9fa;
        overflow-x: hidden;
    }

    .container {
        max-width: 1200px;
        scroll-behavior: smooth;
        margin: 0 auto;
        padding: 0 20px;
    }

    section { padding: 60px 0 !important; }
    h1, h2, h3 { margin-top: 0; font-weight: 700; }

    .gradient-text {
        background: linear-gradient(135deg, #e74c3c 0%, #3498db 50%, #27ae60 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }

    .btn {
        display: inline-block;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .btn-primary {
        background: linear-gradient(135deg, #e74c3c, #3498db);
        color: white;
    }
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
    }

    .btn-secondary {
        background: transparent;
        color: #e74c3c;
        border: 2px solid #e74c3c;
    }
    .btn-secondary:hover {
        background: #e74c3c;
        color: white;
    }

    .btn-register:hover {
        background: #e74c3c;
        color: white;
    }

    .section-title {
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 3rem;
    }

    .card {
        background: white;
        padding: 2rem;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        border: 1px solid rgba(0,0,0,0.05);
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
    }

    header {
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 1000;
        padding: 1rem 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        scroll-behavior: smooth;
    }
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        scroll-behavior: smooth;
    }
    .logo-svg { width: 120px; height: auto; }
    .nav-links {
        display: flex;
        gap: 25px;
        font-weight: 500;
        margin-right: 2rem;
    }
    .nav-links a {
        color: #555;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    .nav-links a:hover {
        color: #3498db;
    }
    .nav-auth-buttons {
          display: flex;
          align-items: center;
    }


    #hero {
        position: relative;
        color: white;
        padding: 100px 0 80px;
        text-align: center;
        overflow: hidden;
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        scroll-behavior: smooth;
    }
    #hero h1 { font-size: 3rem; margin-bottom: 1.5rem; font-weight: 800; }
    #hero .sub-headline { font-size: 1.2rem; margin-bottom: 1rem; color: #e0e0e0; max-width: 700px; margin-left: auto; margin-right: auto; }

    .feature-image-container {
        position: relative;
        background-color: #e9ecef;
        border-radius: 8px;
        overflow: hidden;
        aspect-ratio: 16 / 9;
        margin-bottom: 1rem;
    }
    .feature-display-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.5s ease-in-out;
        loading: lazy;
    }
    .arrow-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.4);
        color: white;
        border: none;
        border-radius: 50%;
        width: 2.5rem; height: 2.5rem;
        display: flex; align-items: center; justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        z-index: 10;
        cursor: pointer;
    }
    .feature-image-container:hover .arrow-btn { opacity: 1; }
    .arrow-btn:hover { background-color: rgba(0, 0, 0, 0.7); }
    .arrow-btn.left { left: 0.5rem; }
    .arrow-btn.right { right: 0.5rem; }
    .image-switcher {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    .image-switcher button {
        width: 10px; height: 10px;
        border-radius: 50%;
        background-color: #ccc;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .image-switcher button.active {
        background-color: #3498db;
        transform: scale(1.2);
    }

    .pricing-table {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
        gap: 1.5rem;
        margin-top: 30px;
    }
    .pricing-plan {
        text-align: center;
        border: 1px solid #e0e0e0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .pricing-plan.selected {
        border: 2px solid #e74c3c;
        transform: scale(1.05);
        box-shadow: 0 10px 30px rgba(231, 76, 60, 0.2);
        position: relative;
    }
    .pricing-plan.selected::before {
        content: '推荐';
        position: absolute;
        top: -15px; left: 50%;
        transform: translateX(-50%);
        background: #e74c3c;
        color: white;
        padding: 0.3rem 1rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: bold;
    }

    .pricing-plan.card { /* Vertical size adjustments */
        padding: 1.25rem;
    }
    .pricing-plan .price {
        font-size: 2.2rem;
        margin: 0.75rem 0;
    }
    .pricing-plan ul {
        list-style: none;
        padding: 0;
        margin: 0.75rem 0;
        text-align: left;
        padding-left: 1rem;
    }
    .pricing-plan li {
        padding: 0.35rem 0;
        position: relative;
        padding-left: 1.5rem;
        font-size: 0.85rem;
        color: #555;
    }
    .pricing-plan li::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: #27ae60;
        font-weight: bold;
    }
    .pricing-plan .btn {
        margin-top: auto;
    }
    .pricing-plan p[style*="color: #27ae60"] { /* For annual plan discount text */
        margin: -0.35rem 0 0.65rem !important;
    }


    .why-deecp-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
        margin-top:30px;
    }

    .courses-scroller-container {
        overflow: hidden;
        width: 100%;
        position: relative;
    }

    .courses-scroller {
        display: flex;
        padding-bottom: 1.5rem;
        gap: 2rem;
        width: calc((280px + 2rem) * 10); /* (card width + gap) * (original cards + copied cards) */
        animation: scrollCourses 60s linear infinite; /* Adjust 60s for speed */
    }

    .courses-scroller-container:hover .courses-scroller {
        animation-play-state: paused;
    }

    @keyframes scrollCourses {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-1 * ( (280px + 2rem) * 5 ) )); /* Scroll by width of original 5 cards */
        }
    }

    .courses-scroller .card {
        min-width: 280px;
        flex-shrink: 0;
    }


    .fade-in-up {
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.8s ease-out forwards;
    }
    @keyframes fadeInUp {
        to { opacity: 1; transform: translateY(0); }
    }
    .floating { animation: float 6s ease-in-out infinite; }
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-8px); }
    }

    .stat-number {
        font-size: 3.5rem;  /* 增大字体大小 */
        font-weight: 800;   /* 加粗字体 */
        line-height: 1.2;   /* 调整行高 */
        margin-bottom: 0.5rem;  /* 添加底部间距 */
    }
    .stat-item {
        padding: 1.5rem;    /* 增加内边距 */
        text-align: center;
    }
    .stat-item div:last-child {
        font-size: 1.1rem;  /* 增大描述文字大小 */
        opacity: 0.9;       /* 稍微降低描述文字透明度 */
    }
</style>